<template>
  <div class="wrapper">
  
    <div class="breadcrumb">
      
        <el-row :gutter="20" >
          
 <el-col :span="4" :offset="3">
      <router-link to="/">
        <img class="header_logo" src="@/assets/home/header_logo.png" alt="">
      </router-link>
    
    </el-col>

          <el-col :span="1" class="logina" :style="{ display:signOut }">
            <el-button  type="text" @click="showLoginDialog"  > 登录</el-button>
          </el-col>

          <el-col :span="1" class="logina" :style="{ display:signOut }">
            <el-button type="text" @click="showRegisterDialog" >注册
              </el-button
          ></el-col >
          <el-col :span="2.5" class="logina" :style="{ display:userlogin }">
            <el-menu
              default-active="1"
              class="el-menu-demo"
              mode="horizontal"
              background-color="#dfedee"
              text-color="#000"
              active-text-color="#000">
              
              <el-submenu index="1">
                <template slot="title">个人中心</template>
                <el-menu-item index="2-1">发布房源</el-menu-item>
                <el-menu-item index="2-2">查看个人资料</el-menu-item>
                <el-menu-item index="2-4">我的订单</el-menu-item>
                <el-menu-item index="2-5" @click="CallforRepairs">系统报修</el-menu-item>
                <el-menu-item index="2-6" @click="clearName">退出</el-menu-item>
              </el-submenu>
            </el-menu>
          </el-col >
        </el-row>
    </div>

    <div class="search-box">
  <el-select v-model="value" class="el-inputt" clearable placeholder="城市">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.city"
    >
    </el-option>

  </el-select>

      <div class="box-menu">
       

        <input type="text" class="box-input" placeholder="请输入区域、地铁站、小区名开始找房" v-model="estate">
        <div class="find-house" @click="handleSearchRoom">开始找房</div>
      </div>
      <div class="result-box">
        <div class="item">
          <strong class="title">位置：</strong>
          <div class="option-list">
            <el-radio-group v-model="location">
              <el-radio-button label="区域"></el-radio-button>
              <el-radio-button label="地铁"></el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div class="item area" v-if="location === '区域'">
          <div class="option-list">
            <el-radio-group v-model="searchCriteria.area" @change="addTag">
              <el-radio-button v-for="item of area" :key="item.id" :label="item.area"></el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div class="item subway" v-if="location === '地铁'">
          <div class="option-list">
            <el-radio-group v-model="searchCriteria.subway" @change="addTag">
              <el-radio-button v-for="item of subway" :key="item.id" :label="item.subway"></el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <!-- 区域下的所有站 -->
        <div class="item area" v-if="location === '区域' && areaStand !==undefined && areaStand.length > 0">
          <div class="option-list">
            <el-radio-group v-model="searchCriteria.areaStand" @change="addTag">
              <el-radio class="rj-radio" v-for="(item, index) of areaStand" :key="index" :label="item">{{item}}</el-radio>
            </el-radio-group>
          </div>
        </div>
        <!-- 地铁下的所有站 -->
        <div class="item area" v-if="location === '地铁' && subwayStand !==undefined && subwayStand.length > 0">
          <div class="option-list">
            <el-radio-group v-model="searchCriteria.subwayStand" @change="addTag">
              <el-radio class="rj-radio" v-for="(item, index) of subwayStand" :key="index" :label="item">{{item}}</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="item">
          <strong class="title">价格：</strong>
          <div class="option-list">
            <el-radio-group v-model="searchCriteria.price" @change="addTag">
              <el-radio-button label="不限"></el-radio-button>
              <el-radio-button label="0-1500">0-1500</el-radio-button>
              <el-radio-button label="1500-2000">1500~2000元</el-radio-button>
              <el-radio-button label="2000-2500">2000~2500元</el-radio-button>
              <el-radio-button label="2500-3000">2500~3000元</el-radio-button>
              <el-radio-button label="3000-5000">3000~5000元</el-radio-button>
              <el-radio-button label="5000-100000">5000元以上</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div class="item">
          <strong class="title">居室：</strong>
          <div class="option-list">
            <el-radio-group v-model="searchCriteria.roomNum" @change="addTag">
              <el-radio-button label="不限"></el-radio-button>
              <el-radio-button label="1室1厅">一居室</el-radio-button>
              <el-radio-button label="2室1厅">两居室</el-radio-button>
              <el-radio-button label="3室1厅">三居室</el-radio-button>
              <el-radio-button label="4室1厅">四居室</el-radio-button>
              <el-radio-button label="5室1厅">五居室</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <!-- <div class="item">
          <strong class="title">类型：</strong>
          <div class="option-list">
            <el-radio-group v-model="searchCriteria.roomType" @change="addTag">
              <el-radio-button label="不限"></el-radio-button>
              <el-radio-button label="整租"></el-radio-button>
              <el-radio-button label="合租"></el-radio-button>
            </el-radio-group>
          </div>
        </div> -->
        <!-- <div class="item">
          <strong class="title">特色：</strong>
          <div class="option-list">
            <el-radio-group v-model="searchCriteria.feature" @change="addTag">
              <el-radio-button label="不限"></el-radio-button>
              <el-radio-button label="独卫">独立卫生间</el-radio-button>
              <el-radio-button label="淋浴">独立淋浴</el-radio-button>
              <el-radio-button label="阳台">独立阳台</el-radio-button>
              <el-radio-button label="有电梯">有电梯</el-radio-button>
              <el-radio-button label="离地铁近">离地铁近</el-radio-button>
            </el-radio-group>
          </div>
        </div> -->
        <el-divider></el-divider>
        <div class="item-choose" v-if="dynamicTags != 0">
          <span>您已选择：</span>
          <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="tagClose(tag)">
            {{tag}}
          </el-tag>
          <i class="el-icon-delete deleteAllTag" @click="deleteAllTag">全部删除</i>
        </div>
      </div>
  
  
    </div>


<div class="result-box"> 
          查询结果
               <p>已为您找到符合条件的房源 </p>
<el-card class="box-card" v-for="h in houseData" :key="h.houseId">
  <div slot="header" class="clearfix" >
    <span>房源信息</span>
    <el-button style="float: right; padding: 3px 0" type="text" @click="xinxi(h.houseId)">查看详情</el-button>
  </div>
  <div class="text item">
   <span><img class="c" src="@/assets/home/service_pic1.jpg"></span>
         {{"\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0"}} {{'地址 :'+ h.address }}
         {{"\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0"}}<span style="font-size:23px">{{'户型 :'+ h.utype }}</span>    
         {{"\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0"}}<span style="font-size:23px">{{'租金 :'+ h.price }}</span>
  </div>
</el-card>
                
                
        
              

</div>
<div><footers></footers></div>



<!-- 登录框 -->
    <el-dialog
      title="登录如家"
      :visible.sync="loginDialogTableVisible"
      width="40%"
      top="2px"
    >
      <el-form
        ref="loginRef"
        :model="user"
        label-width="100px"
        :rules="LoginRules"
      >
        <el-form-item label="帐号" prop="userName">
          <el-input v-model="user.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="userPassword">
          <el-input type="password" v-model="user.userPassword"></el-input>
        </el-form-item>
      </el-form>
      <div class="rj-confrim">
        <span>登录即代表同意</span><a>《如家用户协议》</a><span>及</span><a>《如家隐私政策》</a>
      </div>
          <!-- <h6><el-link href="/forgetpwd" >忘记密码</el-link></h6> -->
          <router-link to="/forgetpwd">
            忘记密码
          </router-link>
      <span slot="footer" class="dialog-footer">
        <el-button @click="loginDialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="login">登录</el-button>
      </span>
    </el-dialog>

    <!-- 注册框 -->
    <el-dialog
      title="输入你的注册信息"
      :visible.sync="RegisterDialogTableVisible"
      width="40%"
      top="2px"
    >
      <el-form
        ref="RegisterRef"
        :model="user"
        label-width="100px"
        :rules="RegisterRules"
      >
        <el-form-item label="帐号" prop="userName">
          <el-input v-model="user.userName"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="userPassword">
          <el-input type="password" v-model="user.userPassword"></el-input>
        </el-form-item>

        <el-form-item label="真实姓名" prop="realName">
          <el-input v-model="user.realName"></el-input>
        </el-form-item>

        <el-form-item label="联系方式" prop="userTel">
          <el-input v-model="user.userTel"></el-input>
        </el-form-item>

        <el-form-item label="身份证号码" prop="userIdcard">
          <el-input v-model="user.userIdcard"></el-input>
        </el-form-item>

        <el-form-item label="性别" prop="userSex">
          <el-radio v-model="user.userSex" label="男">男</el-radio>
          <el-radio v-model="user.userSex" label="女">女</el-radio>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="RegisterDialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="Register">注册</el-button>
      </span>
    </el-dialog>
      
    
  </div>
  
    
  
  
  

</template>

<script>
  
  // import footer from './Footer.vue'
import footers from "./Footer.vue";
  

export default {
   components: {
    footers,
  },
  name: 'Search',
  props: {
    area: Array,
    subway: Array
  },
  data () {
    var checkTel = (rule, value, callback) => {
      //自定义验证
      const regTel = /^[1][3,4,5,7,8][0-9]{9}$/; //正则表达式
      if (regTel.test(value)) {
        //把输入的值与正则校验
        callback();
      } else {
        callback(new Error("手机格式不正确"));
      }
    };

    // houseLength=0;

 // 身份证号码验证
    let idCardValidity = (rule, code, callback) => {
      var city = {11: "北京",12: "天津",13: "河北",14: "山西",15: "内蒙古",21: "辽宁",22: "吉林",23: "黑龙江 ",31: "上海",32: "江苏",
                  33: "浙江",34: "安徽",35: "福建",36: "江西",37: "山东",41: "河南",42: "湖北 ",43: "湖南",44: "广东",45: "广西",46: "海南",
                  50: "重庆",51: "四川",52: "贵州",53: "云南",54: "西藏 ",61: "陕西",62: "甘肃",63: "青海",64: "宁夏",65: "新疆",71: "台湾",
                  81: "香港",82: "澳门",91: "国外 ",};
      var tip = "";
      var pass = true;

      if (
        !code ||
        !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(
          code
        )
      ) {
        tip = "身份证号格式错误";
        pass = false;
      } else if (!city[code.substr(0, 2)]) {
        tip = "地址编码错误";
        pass = false;
      } else {
        // 18位身份证需要验证最后一位校验位
        if (code.length === 18) {
          code = code.split("");
          // ∑(ai×Wi)(mod 11)
          // 加权因子
          var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
          // 校验位
          var parity = [1, 0, "X", 9, 8, 7, 6, 5, 4, 3, 2];
          var sum = 0;
          var ai = 0;
          var wi = 0;
          for (var i = 0; i < 17; i++) {
            ai = code[i];
            wi = factor[i];
            sum += ai * wi;
          }
          var last = parity[sum % 11];
          if (parity[sum % 11] != code[17]) {
            tip = "校验位错误";
            pass = false;
          }
        }
      }
      if (!pass) {
        callback(new Error(tip));
      } else {
        callback();
      }
      // if (!pass) alert(tip)
      // return pass
    };
    



    return {
      loginDialogTableVisible: false,
      RegisterDialogTableVisible: false,
      houseData: [],
      signOut:'', //控制退出后菜单显示
      userlogin:'none',//控制登录后菜单显示
      

          options: [
          {
            city: '北京',
            label: '北京',
          },
          {
            city: '上海',
            label: '上海',
          },
          {
            city: '广州',
            label: '广州',
          },
          {
            city: '深圳',
            label: '深圳',
          },
          {
            city: '成都',
            label: '成都',
          },
        ],
        value: '',

      user: {
        userId: "",
        userName: "",
        userPassword: "",
        realName: "",
        userIdcard: "",
        userSex: "",
        userTel: "",
      },
      house: {
        houseId: "",
        price: "",
        sed: "",
        leasing: "",
        utype: "",
        htype: "",
        chaoxiang: "",
        address: "",
        acreage: "",
        floors: "",
        roomNo: "",
        estate: "",
        hintroduce: "",
        jiadian: "",
        appraisals: "",
        statuss: "",
        ownerId: "",
        haudit: "",
        city: "",
        apply: "",
      },

      location: '区域',
      searchCriteria: {
        area: '不限',
        subway: '不限',
        areaStand: '不限',
        subwayStand: '不限',
        price: '不限',
        roomNum: '不限',
        roomType: '不限',
        feature: '不限'
      },
      dynamicTags: [],
      areaStand: [],
      subwayStand: [],
      searchRoomInput: '',
      estate: '',
      value: "",

      LoginRules: {
        userName: [
          { required: true, message: "请输入帐号", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "帐号长度在 3 到 20 个字符",
            trigger: "blur",
          },
        ],
        userPassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "密码的长度在 6 到 20 个字符",
            trigger: "blur",
          },
        ],
      },
      RegisterRules: {
        userName: [
          { required: true, message: "请输入帐号", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "帐号长度在 3 到 20 个字符",
            trigger: "blur",
          },
        ],
        userPassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "密码的长度在 6 到 20 个字符",
            trigger: "blur",
          },
        ],
        userTel: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: checkTel, trigger: "blur" }, //使用自定义验证
        ],
        // 身份证校验
        userIdcard: [
          { required: true, message: "请输入证件号", trigger: "blur" },
          {
            pattern:
              /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/,
            message: "请输入正确的证件号",
          },
          { validator: idCardValidity, trigger: "blur" },
        ],
      },
    }
    
  },
  created(){
    console.log(sessionStorage.getItem("userName"))
    if(sessionStorage.getItem("userName")!=null){
        //改变菜单
        this.signOut="none";
        this.userlogin="";
    }
    
  },

  methods: {
    async showLoginDialog() {
      //登录所打的模态窗口   //async 标注为异步方法
      this.loginDialogTableVisible = true;
    },
    async showRegisterDialog() {
      //注册所打的模态窗口   //async 标注为异步方法
      this.RegisterDialogTableVisible = true;
    },
    handleClick() {
        alert('button click')
      },
      ///

    // 登录
    login() {
      //addEmpRef：获取refs中的对象
      this.$refs.loginRef.validate((valid) => {
        //是否能获取form表单中的数据，能则进行下一步的操作，
        if (valid) {
          this.$axios.post("user/login", this.user).then((res) => {
            this.loginDialogTableVisible = false; //关闭添加的模态窗口
            if (res.data.statusCode == 200) {
              console.log(res.data.data.userName);
              sessionStorage.setItem("userName", res.data.data.userName);
              this.$message.success(res.data.statusMessage);
              this.user.userPassword = "";
              this.user.userName = "";
               //改变菜单
              this.signOut="none";
              this.userlogin="";
            } else {
              this.$message.error(res.data.statusMessage);
              this.user.userPassword = "";
              this.user.userName = "";
            }
          });
        }
      });
    },
    CallforRepairs(){
      this.$router.push('/CallforRepairs');
    }
    ,

    clearName(){
        this.signOut=''; //控制退出后菜单显示
        this.userlogin='none';//控制登录后菜单显示
    },

    //查看房子详细信息
    xinxi(houseId){
      //console.log(houseId);
       this.$axios.get("selectHouse/findHouseById",{params:{houseId:houseId}}).then((res) => {
            if (res.data.statueCode == 200) {
              this.$message.success(res.data.statueMessage);   
               console.log(res.data.data)
               this.house=res.data.data
               sessionStorage.setItem("houseId",res.data.data.houseId)
               this.$router.push('/houseIntroduce')
              
            } else {
              this.$message.error(res.data.statueMessage);
            }
          });
    },

      //查找房子
    handleSearchRoom () {     
          this.$axios.put('selectHouse/findHouse?city='+this.value +'&estate='+this.estate).then((res) => {
            if (res.data.statueCode == 200) {
              this.$message.success(res.data.statueMessage);
              this.houseData=res.data.data;
                //  let houseLength=Object.keys(res.data.data).length //获取查询出房子数组的大小
                // console.log(houseLength);
               console.log(res.data.data)
               
              
            } else {
              this.$message.error(res.data.statueMessage);
            }
          });
        // }
      // });
    },

    // 注册
    Register() {
      //addEmpRef：获取refs中的对象
      this.$refs.RegisterRef.validate((valid) => {
        //是否能获取form表单中的数据，能则进行下一步的操作，
        if (valid) {
          this.$axios.put("user/register", this.user).then((res) => {
            this.RegisterDialogTableVisible = false; //关闭添加的模态窗口
            if (res.data.statusCode == 200) {
              this.$message.success(res.data.statusMessage);
              this.login;
              this.user.userPassword = "";
              this.user.userName = "";
              this.user.userIdcard = "";
              this.user.userSex = "";
              this.user.userTel = "";
              this.user.realName = "";
              this.login();
            } else {
              this.$message.error(res.data.statusMessage);
            }
          });
        }
      });
    },

    addTag (label) {
      if (this.location === '区域' && this.searchCriteria.area !== '不限') {
        // 当在区域下时，判断地铁中是否有勾选，是则取消勾选并清空对应区域下的所有站
        if (this.searchCriteria.subway !== '不限') {
          this.dynamicTags.splice(this.dynamicTags.indexOf(this.searchCriteria.subway), 1)
        }
        this.searchCriteria.subway = '不限'
        this.subwayStand = []
        // 获得当前点击区域area下的站
        for (var _area in this.area) {
          if (this.searchCriteria.area === this.area[_area]['area']) {
            this.areaStand = this.area[_area]['stand']
          }
        }
      }
      if (this.location === '地铁' && this.searchCriteria.subway !== '不限') {
        // 当在地铁下时，判断区域中是否有勾选，是则取消勾选并清空对应地铁号线下的所有站
        if (this.searchCriteria.area !== '不限') {
          this.dynamicTags.splice(this.dynamicTags.indexOf(this.searchCriteria.area), 1)
        }
        this.searchCriteria.area = '不限'
        this.areaStand = []
        // 获得当前点击地铁subway下的站
        for (var _subway in this.subway) {
          if (this.searchCriteria.subway === this.subway[_subway]['subway']) {
            this.subwayStand = this.subway[_subway]['stand']
          }
        }
      }
      // 移除同一类别单选框
      var tagsArr = []
      for (var key in this.searchCriteria) {
        if (this.searchCriteria[key] !== '不限') {
          tagsArr.push(this.searchCriteria[key])
        }
      }
      this.dynamicTags = tagsArr
      if (this.location === '区域') {
        if (this.searchCriteria.area === '不限') {
          this.areaStand = []
        }
      } else if (this.location === '地铁') {
        if (this.searchCriteria.subway === '不限') {
          this.subwayStand = []
        }
      }
    },
    tagClose (tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
      for (var key in this.searchCriteria) {
        // 如果要删除的标签是区域或者地铁下的标签则需要同时删除相应的站
        if (key === 'area' && tag === this.searchCriteria[key]) {
          this.areaStand = []
          this.dynamicTags.splice(this.dynamicTags.indexOf(this.searchCriteria['areaStand']), 1)
        }
        if (key === 'subway' && tag === this.searchCriteria[key]) {
          this.subwayStand = []
          this.dynamicTags.splice(this.dynamicTags.indexOf(this.searchCriteria['subwayStand']), 1)
        }

        if (tag === this.searchCriteria[key]) {
          this.searchCriteria[key] = '不限'
        }
      }
    },


    deleteAllTag () {
      this.dynamicTags = []
      for (var key in this.searchCriteria) {
        this.searchCriteria[key] = '不限'
      }
      this.areaStand = []
      this.subwayStand = []
    },
    //  axios.get('/api/startLookingHouse?search_text=' + this.searchRoomInput + '&city=' + this.options.value)
  
  },
  watch: {
    searchCriteria: {
      deep: true,
      handler (newVal, oldVal) {
        axios({
          url: '/api/searchRoomByCondition',
          data: {
            city: this.$store.state.city,
            area: this.searchCriteria.area,
            subway: this.searchCriteria.subway,
            areaStand: this.searchCriteria.areaStand,
            subwayStand: this.searchCriteria.subwayStand,
            rent: this.searchCriteria.price,
            doorModel: this.searchCriteria.roomNum,
            roomType: this.searchCriteria.roomType,
            feature: this.searchCriteria.feature
          },
          method: 'post',
          header: {
            'Content-Type': 'application/json'
          }
        })
          .then(res => {
            this.$emit('startLookingHouse', res.data.data)
            this.$emit('witchSearchCriteria', this.searchCriteria)
          })
      }
    },
    'searchCriteria.area' (newData, oldData) {
      this.searchCriteria.areaStand = '不限'
      this.searchCriteria.subwayStand = '不限'
    },
    'searchCriteria.subway' (newData, oldData) {
      this.searchCriteria.subwayStand = '不限'
      this.searchCriteria.areaStand = '不限'
    }
  }
}
</script>

<style scoped>
  .wrapper{
      width: 1190px;
      margin: 0 auto;
      margin-top: 50px;
  }
.breadcrumb{
  background-color: #dfedee;
  
}

.logina{
  float: right;
}
    .rj-breadcrumb{
        font-size: 16px;
        color: #999;
        font-weight: 400;
    }
    .search-box{
      margin-top: 50px;
    }
      .box-input{
        border: 1px solid rgba(0,0,0,.12);
        height: 50px;
        width: 500px;
        text-indent: 12px;
        font-size: 16px;
        padding-left: 30px;
        background-color: #fff;
        border-radius: 5px 0 0 5px;
      }

      
      .find-house{
        display: inline-block;
        text-align: center;
        width: 132px;
        height: 100%;
        background: #ff961e;
        color: #fff;
        border-radius: 0 2px 2px 0;
        transform: translate(-5px,-2px);
        height: 53.7px;
        line-height: 52px;
        vertical-align: middle;
        cursor: pointer;
      }
      .result-box{
        margin-top: 35px;
      }
        .item{
          margin-bottom: 5px;
        }
        .area,.subway{
          margin-left: 53px;
        }
          .option-list{
            display: inline-block;
          }
            .option-list >>> .el-radio-button__orig-radio:checked + .el-radio-button__inner{
              background: #3dbcc6;
              border-radius: 7px;
              padding: 8px 20px;
              border:0px solid #fff;
              box-shadow: 0px 0 0 0 #fff;
              color: #fff;
            }
            .option-list >>> .el-radio-button:first-child .el-radio-button__inner{
              border-left: 0px solid #fff;
            }
            .option-list >>> .el-radio-button__inner{
              border:0px solid #fff;
            }
            .option-list >>> .el-radio-button__inner:hover{
              color: #3dbcc6;
            }
            .rj-radio{
              margin: 0 10px 6px 0;
            }
              .rj-radio >>> .el-radio__label{
                padding-left: 5px;
              }
        .item-choose{
          font-size: 13px;
        }
          .el-tag + .el-tag {
            margin-left: 5px;
          }
          .deleteAllTag {
            color: #4bb4bb;
            padding: 0 0 0 5px;
            cursor: pointer;
          }
     .rj-confrim{
      text-align: center;
    }
      .rj-confrim span{
        color: rgba(0,0,0,.4);
      }
      .rj-confrim a{
        color: #ff961e !important;
        text-decoration: underline;
      }

 .el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }

.el-inputt{
  width: 102px;
}


.showType{
        display: block;
        float: right;
        margin-top: 15px;
        color: rgba(0,0,0,.6);
      }
        .showType span{
          margin-right: 25px;
          padding-bottom: 9px;
          cursor: pointer;
        }
.showItem{
            border-bottom: 3px solid #ff961e;
            color: #ff961e;
        }

        .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  /* .box-card {
    width: 480px;
  } */

.h{
  margin-left: 120px;
}

.a{
  padding: 0px 20px;
  border-bottom: 1px solid #EBEEF5;
 box-sizing: border-box;
}

.b{
  margin-left: 200px;;
}


.footer-main{
        overflow: hidden;
        margin-top: 40px;
        background: #212121;
        padding-bottom: 100px;
    }
        .hidden{
            color: #212121;
            min-height: 36px;
        }
        .about-us{
            margin-top: 80px;
        }
            .about-us span{
                display: inline-block;
                color: #aeaeae;
                padding: 0 0 45px;
                font-size: 20px;
                margin-right: 20px;
            }
            .about-us img{
                width: 120px;
            }
            .rj-logo{
                display: inline-block;
            }
            .rj-sign{
                display: inline-block;
                transform: translateY(-10px);
            }
                .footer-sign{
                    color: #fff;
                    text-decoration: none;
                    font-size:12px
                }
                .rj-sign img{
                    width: 12px;
                }
        .promote{
            margin-top: 80px;
            text-align: center;
        }
            .promote-img{
                display: inline-block;
                margin-right: 25px;
            }
                .promote-img img{
                    width: 100px;
                    border-radius: 5px;
                }
                .promote-img span{
                    display: block;
                    color: #aeaeae;
                    font-size: 14px;
                    margin-top: 10px;
                }
  
  .header_logo{
      height: 40px;
    }

  .c{
    width: 100px;
    height: 100px;
  }

</style>
